<script>
import {showToast} from "vant";
import {doPostVip, getUserInfo} from "@/http/api";
import {storage, USER_INFO} from "@/utils/storage";

export default {
  name: 'VipOpen',
  setup() {
    const onBack = () => history.back();
    return {
      onBack,
    }
  },
  data() {
    return {
      personalName: '',
      surName: "",
      email: '',

    }
  },
  methods: {
    async submit_open() {
      try {
        if (this.personalName.trim() === '' || this.email.trim() === '') {
          showToast(this.$t('msg.emptyStr1'))
          return
        }
        if (this.surName.trim() === '') {
          showToast(this.$t('msg.emptyStr2'))
          return
        }
        if (this.email.trim() === '') {
          showToast(this.$t('msg.emptyStr3'))
          return
        }
        let params = {
          "personalName": this.personalName,
          "surName": this.surName,
          "email": this.email
        }
        console.log(params)
        await doPostVip(params)
        // 开卡成功更新用户信息
        let data = await getUserInfo()
        this.userinfo = data
        storage.set(USER_INFO, JSON.stringify(data))
        showToast(this.$t('msg.vipStr6'))
        // this.$router.replace('/home')
        history.back();
      } catch (e) {
        showToast(e.msg)
      }
    }
  }
}
</script>

<template>
  <div class="">
    <van-nav-bar
        title=""
        :border=false
        class="nav-bar">
      <template #left>
        <van-icon :name="require('./../../assets/ic_back.png')" size="18" @click="onBack"/>
      </template>
    </van-nav-bar>
    <div class="text_1">
      <text class="text_2">{{ $t('msg.vipOpenStr1') }}</text>
    </div>

    <div class="input_1 flex-row">
      <div class="">
        <text class="text_1">{{ $t('msg.vipOpenStr2') }}</text>
      </div>
      <input class="text_3" type="text" :placeholder="$t('msg.vipOpenStr3')" v-model="personalName"/>
    </div>
    <div class="input_2 flex-row">
      <div class="">
        <text class="text_1">{{ $t('msg.vipOpenStr4') }}</text>
      </div>
      <input class="text_3" type="text" :placeholder="$t('msg.vipOpenStr5')" v-model="surName"/>
    </div>
    <div class="input_2 flex-row">
      <div class="">
        <text class="text_1">{{ $t('msg.vipOpenStr6') }}</text>
      </div>
      <input class="text_3" type="email" :placeholder="$t('msg.vipOpenStr7')" v-model="email"/>
    </div>
    <div class="text-wrapper">
      <button class="button_1 center" type="primary" @click="submit_open()">{{ $t('msg.vipOpenStr8') }}</button>
    </div>
  </div>
</template>

<style scoped>
.text_1 {
  margin-top: 140px;
}

.text_2 {
  font-size: 30px;
  font-weight: 600;
  color: #000000;
  line-height: 42px;
}

.text_3 {
  overflow-wrap: break-word;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin-left: 16px;
  border: none;
  outline: none;
  background: transparent;
  color: #000000;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  line-height: 20px;
  ::placeholder{
    color: #A8A8A8;
  }
}

.input_1 {
  height: 52px;
  background: #FFFFFF;
  border-radius: 26px;
  padding: 0 20px 0 20px;
  margin: 60px 30px 20px 30px;
}

.input_2 {
  height: 52px;
  background: #FFFFFF;
  border-radius: 26px;
  padding: 0 20px 0 20px;
  margin: 15px 30px 10px 30px;

}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}


.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button_1 {
  margin-top: 20px;
  width: 353px;
  height: 48px;
  background: #AB9263;
  border-radius: 24px;
  border: none;
  font-size: 17px;
  color: #FFFFFF;
}

.text-wrapper {
  text-align: center;
  margin-top: 20px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text_1 {
  font-size: 14px;
  font-weight: 500;
  color: #AB9263;
}
</style>
